/**
 * 车辆管理
 * @author xiaoxujs
 */

import { Button, ConfigProvider, Input, message, Modal, Table, TableProps } from "antd";
import { useLocation, useNavigate } from 'react-router-dom'
import { DetailsBox, VehicleManagementBox } from "./style";
// import ImportVehicleModule from "./components/ImportVehicleModule";
import { useCallback, useEffect, useState } from "react";
import { INoFenye } from "../../../type/commit";
import { useWindowFontSize } from "../../../assets/fun/Antd/configprovider";
import { ITlplTCarCarList, ITlplTPlanPageList } from "../../../type/WaybillManagement/api";
import { getTlplTCarCarList, getTlplTCarUnbind } from "../api";
import ImportVehicleModule from './components/ImportVehicleModule'

const { Search } = Input;

const VehicleManagement = () => {

    const location = useLocation();
    const {data:detailsData} = location.state as {data:ITlplTPlanPageList};
    const navigate = useNavigate();

    const [modal, contextHolder] = Modal.useModal();

    const [importVehicleShow, setImportVehicleShow] = useState(false); //  导入车辆弹窗
    const [searchValue, setSearchValue] = useState<string>(''); //  搜索框

    const [listData, setListData] = useState<ITlplTCarCarList[]>([]);
    const [tableLoading, setTableLoading] = useState(false); //tableLoading


    const listFun = useCallback(async (paramValue?: string) => {
        if (detailsData.id) {
            setTableLoading(true);
            const { code, msg, data } = (await getTlplTCarCarList({
                planId: detailsData.id,
                carNo: paramValue
            })) as INoFenye<ITlplTCarCarList>;
            if (code === 20000) {
                setListData(data);
                setTableLoading(false);
            } else {
                message.error(msg);
            }
        }

    }, [detailsData.id]);
    useEffect(() => {
        console.log(location.state)
        listFun();
    }, [listFun, location.state])


    // 获取
    const handleSearch = (value: string) => {
        listFun(value);
    }
    //删除
    const handleDelete = async (id: string) => {
        console.log(id)
        const confirmed = await modal.confirm({
            title: '确定要移除当前车辆吗',
        });
        if (confirmed) {
            const { code, msg } = await getTlplTCarUnbind({carId: [id]}) as { code: number, msg: string };
            if (code === 20000) {
                message.success('移除成功');
                listFun(searchValue);
            } else {
                message.error(msg);
            }
        }
    }
    // 导入成功回到
    const handleImportVehicleCallback = () => {
        setImportVehicleShow(false);
        listFun();
    }
    // 导入车辆取消回调
    const handleImportVehicleCancel = () => {
        setImportVehicleShow(false);
    }

    const columns: TableProps<ITlplTCarCarList>['columns'] = [
        {
            title: '序号',
            align: 'center',
            render: (_, record, index) => <span>{index + 1}</span>
        },
        {
            title: '车牌号',
            dataIndex: 'carNo',
            align: 'center',
            render(value, record, index) {
                return (
                    <span>
                        {record.carColour}{value}
                    </span>
                );
            },
        },
        {
            title: '车型',
            dataIndex: 'carType',
            align: 'center',
        },
        {
            title: '司机姓名',
            dataIndex: 'driverName',
            align: 'center',
        },
        {
            title: '司机电话',
            dataIndex: 'phone',
            align: 'center',
        },
        {
            title: '预装量(吨)',
            dataIndex: 'preload',
            align: 'center',
        },
        {
            title: '操作',
            align: "center",
            render: (_, record) => <>
                <Button type="link" onClick={() => handleDelete(record.id)}>
                    移除车辆
                </Button>
            </>
        },
    ];
    return <VehicleManagementBox>
        <div className="title_box">
            <div className="goback_box" onClick={() => navigate(-1)}>
                <span className="iconfont" style={{ fontSize: '1.4rem' }}>&#xe641;</span>
                <span>返回</span>
            </div>
            <div className="title_text">
                <span>导入车辆</span>
            </div>
        </div>
        <DetailsBox>
            <div className="details_item">
                <div className="details_item_title">收货单位：</div>
                <div className="details_item_text">{location.state && location.state.data.consignee}</div>
            </div>
            <div className="details_item">
                <div className="details_item_title">装运周期：</div>
                <div className="details_item_text">{location.state && location.state.data.startDate + '~'}{location.state && location.state.data.endDate}</div>
            </div>
            <div className="details_item">
                <div className="details_item_title">货品：</div>
                <div className="details_item_text">{location.state && location.state.data.product}</div>
            </div>
        </DetailsBox>
        <div className="add_search_box">
            <div className="title">车辆列表</div>
            <div className="search_box">
                <Button 
                    type='primary' 
                    style={{ marginRight: '3rem' }} 
                    icon={<span className="iconfont">&#xe620;</span>} 
                    onClick={() => setImportVehicleShow(true)} 
                    >导入车辆</Button>
                <Search
                    value={searchValue}
                    style={{ width: '27.3rem' }}
                    placeholder="搜索车牌号"
                    allowClear
                    onChange={(e) => {
                        setSearchValue(e.target.value)
                        if (e.target.value === '') {
                            listFun();
                        }
                    }}
                    onSearch={(value) => handleSearch(value)}
                /></div>

        </div>
        <ConfigProvider theme={{
            components: {
                Table: {
                    headerColor: '#8B9BAC',
                    cellFontSize: useWindowFontSize(14),
                    cellPaddingBlock: 7
                }
            }
        }}>
            <Table<ITlplTCarCarList>
                pagination={false}
                rowKey='id'
                columns={columns}
                dataSource={listData}
                loading={tableLoading}
                style={{ border: '0.1rem solid #F3F3F3' }}
            // bordered
            />
        </ConfigProvider>
        <ImportVehicleModule
            open={importVehicleShow}
            planId={detailsData.id}
            handleImportVehicleCallback={handleImportVehicleCallback}
            handleImportVehicleCancel={handleImportVehicleCancel}
        />
        {contextHolder}
    </VehicleManagementBox>
}

export default VehicleManagement;